<template>
  <BasicModal title="付款统计" :destroyOnClose="true" :width="650"
    :showCancelBtn="false" :showOkBtn="false" :canFullscreen="false" :centered="true" :loading="loading"
    @register="registerModal"
  >
    <div style="margin-bottom: 10px;">供应商：{{ title }}</div>
    <table class="orderTable">
      <tbody>
      <tr class="listBg">
        <th width="50" class="tac">类型</th>
        <th width="40" class="tac">成人</th>
        <th width="40" class="tac">儿童</th>
        <th width="40" class="tac">陪同</th>
        <th width="60" class="text-right">应付</th>
        <th width="60" class="text-right">已付</th>
        <th width="60" class="text-right">未付</th>
        <th width="50" class="tac">数量</th>
      </tr>
      </tbody>
      <tbody v-for="(list,index) in model.rows" :key="index">
      <tr :class="[index % 2 == 0 ? 'listBg' : 'cor']">
        <td>{{list.ywlx}}</td>
        <td>{{list.adult_no}}</td>
        <td>{{list.child_no}}</td>
        <td>{{list.escort_no}}</td>
        <td class="text-right text-green-500">{{list.fkje}}</td>
        <td class="text-right text-red-500">{{list.yfk}}</td>
        <td class="text-right text-blue-500">{{list.wfk}}</td>
        <td>{{list.cn}}</td>
      </tr><!--  -->
      </tbody>
      <!--tfoot>
      <tr>
        <td>&nbsp;</td>
        <td class="tips">小计</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="tips text-right font-500 text-red-500" id="sumskje"></td>
        <td class="tips text-right font-500 text-green-500" id="sumfkje"></td>
        <td>&nbsp;</td>
      </tr>
      </tfoot-->
    </table>
  </BasicModal>
</template>

<script lang="ts" name="businessCooperatorModal" setup>
import '/@/design/order.css';
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { defHttp } from "/@/utils/http/axios";

//表单modal
const model = reactive<any>({})
const title = ref<any>("")
const loading = ref<any>(true)
const url   = "/report/businessCooperator"

//表单赋值
const [registerModal, { closeModal }] = useModalInner(async (data) => {
  clear()
  title.value = data.areaName
  loading.value = true
  let params = {...data}
  await defHttp.get({ url, params}).then((res)=> {
    Object.assign(model, res)
  }).finally(() => {
    loading.value = false
  });
});

function clear() {
  for (const key in Object.keys(model)) {
    model[key] = undefined
  }
}
</script>

<style lang="less" scoped>
</style>
